<template>
  <div>
    <h1>role</h1>
    <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="forminfo.rolename"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <!-- 树形控件 树形菜单，树形权限！-->
          <el-tree
            ref="tree"
            :data="menulist"
            show-checkbox
            node-key="id"
            :check-strictly="isStrictly"
            :props="{label:'title',children:'children'}"
            default-expand-all
          ></el-tree>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
          <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
          <el-button type="success" v-else @click="submit">立即修改</el-button>
          <!-- <el-button @click="reset">重置</el-button> -->
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
import { getMenuList, getRole } from '../request/index'
// 修改的时候的重置！
let defaultInfo = {};
export default {
  name: 'role',
  data() {
    return {
      // 修改时用到的数据
      forminfo: {
        rolename: "", // 角色名称
        menus: [], // 权限数组
        status: 1
      },
      rules: {
        // 表单的验证规则
        rolename: [
          { required: true, message: "角色名称必须写", trigger: "blur" }
        ]
      },
      menulist: [], //菜单数据,用于树形权限,
      // 不是严格模式， 父子是关联的。 父点击了子全部选中，子点击了父也会被勾中
      isStrictly: false
    }
  },
  created() {
    // 获取默认数据
    this.getRoleList();
    // 如果是修改，需要额外获取这个角色的数据
    if(this.$route.params.id != 'add') {
      // 修改角色
      this.getRoleData()
    }
  },
  methods: {
    // 必须要获取的数据,这个是共用的
    async getRoleList() {
      let res = await getMenuList({istree: 1});
      this.menulist = res.list;
    },
    // 修改的时候才发这个请求，获取这个角色的数据
    async getRoleData() {
      let res = await getRole(this.$route.params.id);
      // 获取这个角色的数据，整理成数组，赋值给forminfo.menus，forminfo是修改角色时存放数据的变量
      this.forminfo.menus = res.list[0].menus.split(',');
      // 设置为树形控件严格模式，父子互不关联！
      this.isStrictly = true;
      // 等到树形控件严格模式渲染更新完成之后，再去设置数据！
      this.$nextTick(()=>{
        // 数据关联视图，使用el-tree的方法，根据传入的数组，勾选对应的选项
        this.setCheckedKeys()
        // 非严格模式！
        this.isStrictly = false;
      })
      // 赋给一个临时变量，用于重置的时候再次赋值！
      // 深拷贝！！！！！！！！！！！！
      defaultInfo = { ...this.forminfo };
      // 深拷贝！！！！！！！！！！！！

    },
    // el自带的方法，根据数据勾选对应的选项
    setCheckedKeys() {
      // 看el的文档！这个是通过key勾选对应选项
      this.$refs.tree.setCheckedKeys(this.forminfo.menus);
    },
    // 提交修改
    submit() {
      // 表单验证！！！
      if(true) {
        // el自带的方法!获得被选中节点的id值！
        // getCheckedKeys全选的节点，getHalfCheckedKeys半选的节点
        // concat 将刚才的两个数组合并
        console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()));
        if(true) {
          // 修改
          // this.editRole()
        }else{
          // 新增
          // this.addRole()
        }
      }
    },
  },
}
</script>
<style lang="">

</style>
